<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
	</head>
	<body>
		<div id="app">
			<com @parentfun='loadComponet'></com>
			<ul class="list-group">
				<li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
					{{item.content}}
					<span class="badge badge-info">{{item.name}}</span>
				</li>
			</ul>
		</div>
		<template id="tmp">
			<div>
				<div class="form-group">
					<label>姓名：</label>
					<input type="text" class="form-control" v-model="name" />
				</div>
				<div class="form-group">
					<label>评论：</label>
					<textarea class="form-control" v-model="content"></textarea>
					<input type="button" id="" class="btn bg-primary" value="提交" @click="submit" />
				</div>
			</div>
		</template>


		<script>
			var com = {
				template: '#tmp',
				data() {
					return {
						content: '',
						name: ''
					}
				},
				methods: {
					submit() {
						//获取存储在local的值   //这里如果list没有取到 就是[]
						var json = JSON.parse(localStorage.getItem('list') || '[]')
						//从头部添加一个对象  一般还可以用push 
						json.unshift({
							'content': this.content,
							'name': this.name,
							'id': Date.now()
						})
						//本地添加一个json字符串
						localStorage.setItem('list', JSON.stringify(json))
						//清空
						this.content = this.name = ''
						this.$emit('parentfun')
					}
				}
			}
			new Vue({
				el: '#app',
				beforeCreate() {
				
				},
				created() {
					console.log("运行到created方法")
					this.loadComponet()
				
				},
				data: {
					list: [{
							id: Date.now(),
							name: '维斯布鲁克',
							content: 'ayo在你头上暴扣，渣渣'
						}, {
							id: Date.now(),
							name: '科比',
							content: '凌晨三点半的洛杉矶'
						},
						{
							id: Date.now(),
							name: '卡特',
							content: 'oh。my God'
						}
					]
				},
				methods: {
					loadComponet(){
						this.list=JSON.parse(localStorage.getItem('list'||'[]'));
					}
				},

				components: {
					com
				}
			})
		</script>
	</body>
</html>
